import Vue from 'vue'
import VueRouter from 'vue-router'
import store from '../store/index'
import { message } from 'ant-design-vue';

//懒加载方式
const Login = () => import('@/views/login/Login.vue')
const Register = () => import('@/views/register/Register.vue')
const NotFound = () => import('@/components/notFound/NotFound.vue')
const Admin = () => import('@/views/admin/Admin.vue')
const Home = () => import('@/views/home/Home.vue')
const Product = () => import('@/views/product/Product.vue')
const ProductManager = () => import('@/views/product/ProductManager.vue')
const CategoryManager = () => import('@/views/product/CategoryManager.vue')
const UserManager = () => import('@/views/user/UserManager.vue')
const RoleManager = () => import('@/views/role/RoleManager.vue')
const Echarts = () => import('@/views/charts/Echarts.vue')
const Bar = () => import('@/views/charts/Bar.vue')
const Pie = () => import('@/views/charts/Pie.vue')
const Line = () => import('@/views/charts/Line.vue')
const OrderManager = () => import('@/views/order/OrderManager.vue')

Vue.use(VueRouter)

//进行动态路由的配置
const homeRule = {
  path: 'home',
  name: '首页',
  component: Home
}

const userRule = {
  path: 'userManager',
  name: '用户管理',
  component: UserManager
}

const roleRule = {
  path: 'roleManager',
  name: '角色管理',
  component: RoleManager
}

const goodsRule = {
  path: 'product',
  name: '商品',
  redirect: '/index/product/productManager',
  component: Product,
}

const goodsManager = {
  path: 'productManager',
  name: '商品管理',
  component: ProductManager
}

const categoryManager = {
  path: 'categoryManager',
  name: '分类管理',
  component: CategoryManager
}

const chartsRule = {
  path: 'charts',
  name: '图表',
  redirect: '/index/charts/bar',
  component: Echarts,
}

const bar = {
  path: 'bar',
  name: '柱状图',
  component: Bar
}

const pie = {
  path: 'pie',
  name: '饼图',
  component: Pie
}

const line = {
  path: 'line',
  name: '折线图',
  component: Line
}

const orderRule = {
  path: 'orderManager',
  name: '订单管理',
  component: OrderManager
}

const rlueMapping = {
  '/index/home': homeRule,
  '/index/userManager': userRule,
  '/index/roleManager': roleRule,
  '/index/product': goodsRule,
  '/index/charts': chartsRule,
  '/index/orderManager': orderRule,
  '/index/product/productManager': goodsManager,
  '/index/product/categoryManager': categoryManager,
  '/index/charts/bar': bar,
  '/index/charts/pie': pie,
  '/index/charts/line': line,
}

const routes = [
  {
    path: '/',
    name: '登录',
    component: Login
  },
  {
    path: '/login',
    name: '登录',
    component: Login
  },
  {
    path: '/register',
    name: '注册',
    component: Register
  },
  {
    path: '/index',
    name: '主页',
    redirect: '/index/home',
    component: Admin,
  },

]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})


// 添加路由守卫
router.beforeEach((to, from, next) => {
  const isLogin = window.localStorage.NiuToken ? true : false;
  if (to.path == "/login" || to.path == "/register") {
    next();
  } else {
    //如果token过期或者没登录就跳转到登录页面
    if (isLogin) {
      next()
    } else {
      next("/login")
    }
  }
})
//添加后置全局钩子，当退出登录，进入登录界面后，强制刷新登录页面，解决赋予的权限不刷新的bug
router.afterEach((to, from) => {
  console.log(from)
  if (from.path != '/login' && from.path != '/' && to.path == '/login') {
    window.location.reload();
  }
})

//动态添加菜单的路由
export function initDynamicRoutes () {
  const currentRoutes = router.options.routes   //得到当前已经有的路由，在最后一个路由中动态添加其他路有
  const rightList = store.state.user.role.menus  //当前登录用户所拥有的菜单权限
  rightList.forEach(item => {
    const pathNum = item.split('/').length - 1
    if (item != '-1') {
      if (pathNum > 2) {  //大于2，代表当前是三级子路径
        //首先判断一下是否已经有其二级主路径，如果有就直接添加，如果没有，需要先将二级主路径添加进去
        const splitPath = item.split('/').slice(-999, -1)  //分割当前路径
        let curPath = ''
        for (let i = 0; i < splitPath.length; i++) {
          curPath = '/' + splitPath[1] + '/' + splitPath[2]
        }
        if (rightList.indexOf(curPath) != -1) { //如果有二级路径，也早就添加到路由中了，需要将二级路由的name获取到，然后直接添加三级路径
          const item1rule = rlueMapping[curPath]  //获取二级路由信息
          const item1ruleName = item1rule.name   //获取二级路由name
          const item2rule = rlueMapping[item]  //添加子路由
          router.addRoute(item1ruleName, item2rule)
        } else {
          const item1rule = rlueMapping[curPath]  //添加主路由
          const item1ruleName = item1rule.name
          router.addRoute('主页', item1rule)
          const item2rule = rlueMapping[item]  //添加子路由
          router.addRoute(item1ruleName, item2rule)
        }
      } else {  //小于等于2代表当前路径是二级主路径
        const item3rule = rlueMapping[item]
        router.addRoute('主页', item3rule)
      }
    }
  });
  //添加404路由，不能直接添加到routes中，这样会导致刷新页面就到404
  router.addRoute({
    path: '*',
    name: 'notFound',
    component: NotFound
  })
}

export default router
